<template>
	<view class="content">
		<uni-nav-bar leftIcon="back" @clickLeft="clickBack" :title="title" :fixed="true" :statusBar="false"
			:opacity="nav_opacity" :placeholder="false">
		</uni-nav-bar>
		<!-- #ifndef MP-BAIDU -->
		<view v-if="nav_opacity<0.01" class="zhuige-nav-back" :style="{top: statusBarHeight + 'px'}">
			<uni-icons type="back" size="24" color="#FFFFFF"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="" :style="style">
			<template v-for="(post, index) in rec_posts">
				<view class="zhuige-mini-group" :key="index">
					<!-- 文章自定义 -->
					<view v-if="post.post_type=='page'" class="zhuige-mini-custom">
						<view v-if="post.title.includes('哀伤')">
							<view class="zhuige-block">
								<view class="zhuige-block-head">
								</view>
								<view v-for="(item, inx) in post.items" :key="inx" class="zhugie-info-block left-side"
									@click="clickPost(item)">
									<view v-if="item.badge" class="zhugie-info-image">
										<image mode="aspectFill" :src="item.image" />
									</view>
									<view class="zhugie-info-text">
										<view class="zhugie-info-title">{{item.title}}</view>
										<view class="zhuige-info-post">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 帖子 -->
					<zhuige-scroll-ad v-else-if="post.post_type=='zhuige_bbs_topic'"
						ext-ad-class="zhuige-scroll-coterie zhuige-topic-scroll" :title="post.title"
						:items="post.items">
					</zhuige-scroll-ad>
					<!-- 其他 -->
					<zhuige-scroll-ad v-else ext-ad-class="zhuige-scroll-coterie" :title="post.title"
						:items="post.items">
					</zhuige-scroll-ad>

				</view>
			</template>
        </view>
	</view>
</template>

<script>
	/*
	 * 追格小程序
	 * 作者: 追格
	 * 文档: https://www.zhuige.com/docs/zg.html
	 * gitee: https://gitee.com/zhuige_com/zhuige_xcx
	 * github: https://github.com/zhuige-com/zhuige_xcx
	 * Copyright © 2022-2023 www.zhuige.com All rights reserved.
	 */

	import Constant from '@/utils/constants';
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';

	import ZhuigeTopic from "@/components/zhuige-topic";
	import ZhuigeSwiper from "@/components/zhuige-swiper";
	import ZhuigeIcons from "@/components/zhuige-icons";
	import ZhuigeUserList from "@/components/zhuige-user-list";
	import ZhuigeScrollAd from "@/components/zhuige-scroll-ad";
	import ZhuigeTab from "@/components/zhuige-tab";
	import ZhuigeNodata from "@/components/zhuige-nodata";

	export default {
		data() {
			this.loginReload = false;

			// #ifdef MP-WEIXIN
			// 微信广告
			this.traffic_chp = null;
			// #endif

			return {
				logo: undefined,

				tabs: [{
						id: 'last',
						title: '近期'
					},
					{
						id: 'follow',
						title: '关注'
					},
				],
				cur_tab: 'last',
				// tab_type 1：tab是文章类型；2：tab是帖子（近期、关注）
				tab_type: 2,
				tab_sticky_top: 70,

				slides: [],
				icons: [],
				hot_link: undefined,
				subject_hots: undefined,
				subject_hot_width: 900,
				imgs_top: undefined,
				imgs_embed: undefined,
				rec_user: undefined,
				rec_forum: undefined,

				rec_posts: [],

				// 分享截图
				thumb: undefined,

				// 是否显示tab
				tab_switch: 0,
				// 是否显示list
				list_switch: 0,

				// 最新帖子
				lastTopics: [],
				lastLoadMore: 'more',
				lastLoaded: false,

				//关注的人
				followUser: undefined,

				// 关注的人的帖子
				followTopics: [],
				followLoadMore: 'more',
				followLoaded: false,

				is_ios: false,

				// 弹窗广告
				pop_ad: undefined,

				// #ifdef MP-WEIXIN
				// 微信流量主广告
				traffic_list: undefined,
				// #endif

				style: '',
			}
		},

		components: {
			ZhuigeTopic,
			ZhuigeSwiper,
			ZhuigeIcons,
			ZhuigeUserList,
			ZhuigeScrollAd,
			ZhuigeTab,
			ZhuigeNodata
		},

		onLoad(options) {
			Util.addShareScore(options.source);

			this.is_ios = (uni.getSystemInfoSync().platform == "ios");

			// #ifndef H5
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.tab_sticky_top = menuButtonInfo.top + menuButtonInfo.height + 8;
			// #endif

			this.refresh();

			uni.$on('zhuige_event_user_login', this.onSetReload);
			uni.$on('zhuige_event_follow_user', this.onFlollowUser);
			uni.$on('zhuige_event_user_like', this.onUserLike);
		},

		onUnload() {
			uni.$off('zhuige_event_user_like', this.onUserLike);
			uni.$off('zhuige_event_follow_user', this.onFlollowUser);
			uni.$off('zhuige_event_user_login', this.onSetReload);
		},

		onShow() {
			Util.setNoticeRedDot();

			if (this.loginReload) {
				this.loginReload = false;

				this.refresh();
			}
		},

		onPullDownRefresh() {
			this.refresh();
		},

		onReachBottom() {
			if (this.list_switch != 1) {
				return
			}

			if ((this.tab_type == 1 || (this.tab_type == 2 && this.cur_tab == 'last')) && this.lastLoadMore == 'more') {
				this.loadLastTopic(false);
			} else if (this.cur_tab == 'follow' && this.followLoadMore == 'more') {
				this.loadFollowTopic(false);
			}
		},

		onShareAppMessage() {
			let params = {
				title: getApp().globalData.appName + '-' + getApp().globalData.appDesc,
				path: Util.addShareSource('pages/tabs/index/index?n=n')
			};

			if (this.thumb) {
				params.imageUrl = this.thumb;
			}

			return params;
		},

		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return {
				title: getApp().globalData.appName + '-' + getApp().globalData.appDesc,
			};
		},
		// #endif

		methods: {
			//----- event start -----
			/**
			 * 登录事件
			 */
			onSetReload(data) {
				this.loginReload = true;
			},

			/**
			 * 点击文章
			 */
			clickPost(post) {
				if (post.driect_link_switch == '1') {
					Util.openLink(post.driect_link);
				} else {
					Util.openLink(post.link + '?id=' + post.id);
				}
			},

			/**
			 * 关注事件
			 */
			onFlollowUser(data) {
				if (this.rec_user && this.rec_user.users && this.rec_user.users.length > 0) {
					this.rec_user.users.forEach(user => {
						if (user.user_id == data.user_id) {
							user.is_follow = data.is_follow;
						}
					})
				}

				if (this.cur_tab == 'follow') {
					this.loadFollowTopic(true);
				} else {
					this.followLoaded = false;
				}
			},

			/**
			 * 点赞事件
			 */
			onUserLike(data) {
				if (this.lastTopics && this.lastTopics.length > 0) {
					this.lastTopics.forEach((topic) => {
						if (topic.id == data.post_id) {
							topic.like_count = data.like_count;
						}
					})
				}

				if (this.followTopics && this.followTopics.length > 0) {
					this.followTopics.forEach((topic) => {
						if (topic.id == data.post_id) {
							topic.like_count = data.like_count;
						}
					})
				}
			},
			// ------- event end ---------

			/**
			 * 刷新
			 */
			refresh() {
				this.loadSetting();

				this.lastLoaded = false;
				this.followLoaded = false;

				if (this.tab_type == 1 || (this.tab_type == 2 && this.cur_tab == 'last')) {
					this.loadLastTopic(true);
				} else if (this.cur_tab == 'follow') {
					this.loadFollowTopic(true);
				}
			},

			/**
			 * 点击打开链接
			 */
			openLink(link) {
				Util.openLink(link);
			},

			/**
			 * 近期-关注 tab切换
			 */
			clickTab(tab) {
				this.cur_tab = tab.id;

				if (this.tab_type == 1 || (this.tab_type == 2 && this.cur_tab == 'last' && !this.lastLoaded)) {
					this.loadLastTopic(true);
				} else if (this.cur_tab == 'follow' && !this.followLoaded) {
					this.loadFollowTopic(true);
				}
			},

			/**
			 * 加载配置
			 */
			loadSetting() {
				Rest.post(Api.URL('setting', 'home')).then(res => {
					this.logo = res.data.logo;
					this.slides = res.data.slides;
					this.icons = res.data.icons;

					if (res.data.style) {
						this.style = res.data.style;
					}

					if (res.data.hot_link) {
						this.hot_link = res.data.hot_link;
					}

					if (res.data.subject_hots) {
						this.subject_hots = res.data.subject_hots;
					}

					if (res.data.subject_hot_width) {
						this.subject_hot_width = res.data.subject_hot_width;
					}

					if (res.data.imgs_top) {
						this.imgs_top = res.data.imgs_top;
					}

					if (res.data.imgs_embed) {
						this.imgs_embed = res.data.imgs_embed;
					}

					if (res.data.rec_user) {
						this.rec_user = res.data.rec_user;
					}

					if (res.data.rec_forum) {
						this.rec_forum = res.data.rec_forum;
					}

					if (res.data.rec_posts) {
						this.rec_posts = res.data.rec_posts;
					}

					if (res.data.tabs) {
						this.tabs = res.data.tabs;
					}

					if (res.data.cur_tab) {
						this.cur_tab = res.data.cur_tab;
					}

					if (res.data.tab_type) {
						this.tab_type = res.data.tab_type;
					}

					this.tab_switch = res.data.tab_switch;
					this.list_switch = res.data.list_switch;

					if (res.data.rec_posts) {
						this.rec_posts = res.data.rec_posts;
					}

					if (res.data.thumb) {
						this.thumb = res.data.thumb;
					}

					this.pop_ad = Util.getPopAd(res.data.pop_ad, Constant.ZHUIGE_INDEX_MAXAD_LAST_TIME);

					// #ifdef MP-WEIXIN
					if (res.data.traffic_chp && wx.createInterstitialAd && !this.traffic_chp) {
						this.traffic_chp = wx.createInterstitialAd({
							adUnitId: res.data.traffic_chp
						})
						this.traffic_chp.onLoad(() => {})
						this.traffic_chp.onError((err) => {
							console.log(err)
						})
						this.traffic_chp.onClose(() => {})
						this.traffic_chp.show();
					}
					if (res.data.traffic_list) {
						this.traffic_list = res.data.traffic_list;
					}
					// #endif

					uni.stopPullDownRefresh();
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 加载最新帖子
			 */
			loadLastTopic(refresh) {
				if (this.lastLoadMore == 'loading') {
					return;
				}
				this.lastLoadMore = 'loading'

				Rest.post(Api.URL('posts', 'list_last2'), {
					offset: refresh ? 0 : this.lastTopics.length,
					post_type: this.cur_tab
				}).then(res => {
					this.lastTopics = refresh ? res.data.topics : this.lastTopics.concat(res.data.topics);
					this.lastLoadMore = res.data.more;
					this.lastLoaded = true;
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 加载关注人的帖子
			 */
			loadFollowTopic(refresh) {
				if (this.followLoadMore == 'loading') {
					return;
				}
				this.followLoadMore = 'loading'

				Rest.post(Api.URL('posts', 'list_follow'), {
					offset: refresh ? 0 : this.followTopics.length
				}).then(res => {
					if (res.data.follow_user) {
						this.followUser = res.data.follow_user;
					}
					this.followTopics = refresh ? res.data.topics : this.followTopics.concat(res.data.topics);
					this.followLoadMore = res.data.more;
					this.followLoaded = true;
				}, err => {
					console.log(err)
				});
			},

			/**
			 * 点击弹出窗口
			 */
			clickPopAd() {
				wx.setStorageSync(Constant.ZHUIGE_INDEX_MAXAD_LAST_TIME, new Date().getTime())
				Util.openLink(this.pop_ad.link);
				this.pop_ad = false;
			},

			/**
			 * 关闭弹出窗口
			 */
			clickPopAdClose() {
				this.pop_ad = false;
				wx.setStorageSync(Constant.ZHUIGE_INDEX_MAXAD_LAST_TIME, new Date().getTime())
			},
		}
	}
</script>

<style lang="scss">
	.zhuige-nav-logo {
		display: flex;
		align-items: center;
		margin-right: 15rpx;

		image {
			height: 48rpx;
			width: 128rpx;
		}
	}

	.zhuige-nav-search {
		display: flex;
		align-items: center;
		width: 80%;
		height: 32px;
		padding-left: 20rpx;
		color: #999999;
		font-size: 28rpx;
		border: 1rpx solid #999999;
		border-radius: 16px;
	}

	.zhugie-follow-box {
		padding: 0 20rpx;
	}

	.zhuige-tab-block {
		padding: 20rpx 0 60rpx;
	}

	.zhuige-scroll-icon .text {
		color: #666666 !important;
	}

	.zhuige-icon .view {
		width: 30% !important;
	}

	.zhuige-social-list .zhugie-info-block .zhuige-info-data text:nth-child(1) {
		margin-left: 0;
	}

	.zhuige-mini-custom .zhugie-info-block {
		border-top: 1rpx solid #DDDDDD;
	}

	.zhuige-mini-custom .zhuige-block,
	.zhuige-mini-custom-twins .zhuige-block {
		padding: 12rpx 20rpx 14rpx;
	}

	.zhuige-mini-custom .zhugie-info-block:nth-child(2) {
		border: none;
		padding-top: 0;
	}

	.zhuige-mini-custom .zhugie-info-block {
		padding: 0 0;
	}

	/* --- 热门头条 --- */
	.zhuige-hot-box .zhuige-scroll-icon {
		border-radius: 12rpx 12rpx 0 0;
	}

	.zhuige-hot-group {
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 0 0 12rpx 12rpx;
	}

	.zhuige-hot-news {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		border-top: 1rpx dotted #EEEEEE;
	}

	.zhuige-hot-swiper {
		height: 90rpx;
		line-height: 90rpx;
		overflow: hidden;
		width: 560rpx;
	}

	.zhuige-hot-news image {
		height: 30rpx;
		width: 120rpx;
		margin-right: 20rpx;
	}

	.zhuige-hot-list {
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zhuige-hot-list text {
		display: inline-block;
		vertical-align: middle;
	}

	.zhuige-hot-title {
		width: 520rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.zhuige-cust-block {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.zhuige-tags-list-box {
		overflow-x: scroll;
		padding-bottom: 12rpx;
		margin-top: -12rpx;
	}

	.zhuige-tags-list-box::-webkit-scrollbar {
		display: none;
	}

	/** hot tags **/
	.zhuige-tags-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		overflow-y: hidden;
	}

	.zhuige-tags-list view {
		padding: 8rpx 40rpx;
		border-radius: 60rpx;
		font-size: 24rpx;
		color: #555;
		font-weight: 500;
		background: #F3F3F3;
		margin-right: 20rpx;
		margin-top: 20rpx;
		position: relative;
		white-space: nowrap;
	}

	.zhuige-tags-list view text {
		position: absolute;
		z-index: 6;
		font-size: 18rpx;
		font-weight: 300;
		color: #FFFFFF;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx 18rpx 18rpx 0;
		padding: 0 12rpx;
		right: -20rpx;
		top: -18rpx;
		background: #363B51;
		white-space: nowrap;
	}

	/** hot tags end **/


	/** cust-wide **/
	.zhuige-cust-wide-block {
		margin-bottom: 20rpx;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad {
		margin-top: -20rpx !important;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad-block {
		vertical-align: text-top;
		width: 52% !important;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad-cover {
		height: 340rpx !important;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad-info {
		padding-bottom: 0 !important;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad-info .title-info {
		font-size: 30rpx !important;
		font-weight: 600 !important;
		height: 1.4em !important;
		line-height: 1.4em !important;
	}

	.zhuige-cust-wide-block .zhuige-scroll-ad-info .item-price {
		font-size: 26rpx !important;
		height: 1.4em !important;
		line-height: 1.4em !important;
		color: #FF4400 !important;
	}

	.zhuige-cust-wide-block .price-info .price-unit {
		display: none !important;
	}


	/**
	 * 弹窗 start
	 */
	.zhugie-pop-cover {
		position: fixed;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, .6);
		z-index: 998;
		top: 0;
		left: 0;
	}

	.zhuige-pop-box {
		width: 600rpx;
		height: 600rpx;
		position: relative;
		text-align: center;
	}

	.zhuige-pop-box image {
		height: 100%;
		width: 100%;
	}

	.zhuige-pop-box view {
		position: absolute;
		bottom: -48rpx;
		height: 48rpx;
		width: 48rpx;
		z-index: 999;
		left: 50%;
		margin-left: -24rpx;
	}

	/**
	 * 弹窗 end
	 */
</style>
